<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul id="ul"></ul>

    <script>
        let now = Date.now()
        const total = 10000
        const ul = document.getElementById('ul')
        const once = 20
        const page = total / once

        function loop(curTotal, curIndex) { // 分批渲染
            if (curTotal <= 0) {
                return
            }
            let pageCount = Math.min(once, curTotal)

            requestAnimationFrame(() => {
                for (let i = 0; i < pageCount; i++) {
                    let li = document.createElement('li')
                    li.innerText = curIndex + i + ':' + ~~(Math.random() * total)
                    ul.appendChild(li)
                }
                loop(curTotal - pageCount, curIndex + pageCount)
            })
        }
        loop(total, index)
        
    </script>
</body>
</html>